<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""DTD/xhtml1-strict.dtd">
<%@page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib uri="/WEB-INF/c.tld" prefix="c"%>
<%@taglib uri="/WEB-INF/fmt.tld" prefix="fmt"%>
<%@taglib uri="/WEB-INF/el.tld" prefix="el"%>
<%@taglib uri="/WEB-INF/fn.tld" prefix="fn"%>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
		<title></title>
		<c:import url="/includes/css_inc.jsp"/>
		<c:import url="/includes/js_inc.jsp"/>
		<script>
			$(function(){
				var dhtml = new DHTML();
				var count = 0;
				$("#add").button({
		            icons: {
		                primary: "ui-icon-plusthick"
		            }
		        }).click(function(){
		        	$("#catDetail").css("display","");
		        	var tr = dhtml.createElement(document.getElementById("listCategry"), ["tr","id="+count+""], "");
					var td1 = dhtml.createElement(tr, ["td","align=center"], "");
					var td2 = dhtml.createElement(tr, ["td","align=center"], "");
					var td3 = dhtml.createElement(tr, ["td","align=center"], "");
					dhtml.createElement(td1, ["input","type=text","name=categoryName","id=categoryName"+count], "");
					dhtml.createElement(td1, ["span","class=red","id=#categoryName"+count], "*");
					dhtml.createElement(td2, ["textarea","cols=50","rows=2","name=categoryDesc"], "");
					var a = dhtml.createElement(td3, ["a","class=acc67-button"], "");
			        $("a").button({
			            icons: {
			                primary: "ui-icon-closethick"
			            },
	            		text: false
			        });
			        a.onclick= function () {
			        	dhtml.removeElement(tr);
			        	count--;
			        	if (count == 0){
			        		disableFieldName(["save"]);
							$("#save").addClass("ui-button-disabled ui-state-disabled");
				        	$("#catDetail").css("display","none");
			        	}
					}
			        count++;
			        enableFieldName(["save"]);
					$("#save").removeClass("ui-button-disabled ui-state-disabled");
		        });
				$("[name=addParent]").button({
		            icons: {
		                primary: "ui-icon-plusthick"
		            },
            		text: false
				});

				$("#save").button({
		            icons: {
		                primary: "ui-icon-disk"
		            }
		        }).click(function(){
					if(validateEmpty()){
		        		$("#saveForm").submit();
					}
		        });
				$("#back").button({
		            icons: {
		                primary: "ui-icon-arrowreturnthick-1-w"
		            }
		        }).click(function(){
		        	$("#job").val("back");
		        	$("#saveForm").submit();
		        });
        		disableFieldName(["save"]);
				$("#save").addClass("ui-button-disabled ui-state-disabled");
			});
			function delCaregory(trId){
				var dhtml = new DHTML();
				if(confirm('คุณต้องการลบรายการรายจ่าย?')==true){
					dhtml.removeElementById(id);
				}
			}
		</script>
	</head>
	<body>
		<c:set var="auth" value="${el:getMapValue(menuAuth, 'ACC70201')}"/>
		<c:import url="/apps/msg.jsp"/>
		<form class="acc67-form" name="saveForm" id="saveForm" action="${pageContext.request.contextPath}/acc7" method="post">
		<input type="hidden" name="app" id="app" value="ACC70201"/>
		<input type="hidden" name="job" id="job" value="${job}"/>
		<table width="100%" class="ui-widget ui-widget-content" border="0">
			<tr>
				<th align="left" class="acc67-header ui-widget-header" colspan="2"><b>${screenCode.ACC70201}</b></th>
			</tr>
			<tr>
				<td align="right"><button type="button" name="add" id="add">เพิ่มข้อมูล</button></td>
			</tr>
			<tr id="catDetail" style="display: none;">
				<td>
					<fieldset>
						<legend> เพิ่มหมวดการจ่าย </legend>
						<table width="100%" class="acc67-grid ui-widget ui-widget-content" border="0">
							<tr>
								<th align="center" class="ui-state-default" width="15%">ชื่อหมวดการจ่าย</th>
								<th align="center" class="ui-state-default">คำอธิบายหมวดการจ่าย</th>
								<th align="center" class="ui-state-default" width="5%">ลบ</th>
							</tr>
							<tbody id="listCategry">
							</tbody>
						</table>	
					</fieldset>	
				<td>
			</tr>
			<tr>
				<td align="center">
					<c:if test="${fn:contains(auth, 'I')}">
						<button type="button" name="save" id="save" class="acc67-button">บันทึก</button>
					</c:if>
					<button type="button" name="back" id="back" class="acc67-button">ย้อนกลับ</button>
				</td>
			</tr>
		</table>
		</form>
	</body>
</html>